<template>
    <div>
        <div class="clearfix cell_box-item" v-for="(items,indexs) in datas" :key="indexs">
            <div class="cell_box-border" v-for="(item,index) in items" :key="index">
                <div v-for="(msg,idx) in item" @click="cellClick(msg)" :key="idx" :class="['cell_box', msg.state==='1'?'cell_box-up':msg.state==='2'?'cell_box-down':'cell_box-unplugin', msg.subId==selectedId?'cell_box-selected':'']">
                    {{indexs*cellNums+index*cellRows+idx+1}}
                </div>
            </div>
        </div>
    </div>
</template>
<style>
.cell_box {
    cursor: pointer;
    display: block;
    width: 2em;
    height: 2em;
    font-size: 1em;
    text-align: center;
    line-height: 2em;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.cell_box:hover {
    color: #fff;
    background-color: #81C5F5;
}

.cell_box:active {
    color: red;
    font-weight: bold;
    background-color: #FFF;
}

.cell_box-border {
    float: left
}

.cell_box-border .cell_box-selected {
    background-color: #81C5F5;
    color: #fff;
}

.cell_box-item {
    display: inline-block;
    margin-right: 20px;
    margin-top: 20px;
    border-top: 1px solid black;
    border-left: 1px solid black;
}

.cell_box-up {
    background-color: #66CC00;
}

.cell_box-down {
    background-color: #FA6634;
}

.cell_box-unplugin {
    background-color: #999999;
}
</style>
<script>
export default {
    data() {
        return {
            datas: [],
            selectedId: ''
        }
    },
    name: "port-state",
    props: {
        portsData: {
            type: Array,
            default: null
        },
        //每块包含的方格的数量
        cellNums: {
            type: Number,
            default: 16
        },
        //每块的行数
        cellRows: {
            type: Number,
            default: 2
        }
    },
    watch: {
        'portsData': function (curVal, oldVal) {
            this.handleData();
        }
    },
    mounted:function(){
    	this.handleData();
    },
    methods: {
        handleData() {
            let temp_data = this.portsData;
            for (let i = 0; i < Math.ceil(temp_data.length / this.cellNums); i++) {
                let temp_info = temp_data.slice(i * this.cellNums, (i + 1) * this.cellNums);
                let temp_arr = [];
                for (let c = 0; c < Math.ceil(temp_info.length / this.cellRows); c++) {
                    temp_arr.push(temp_info.slice(c * this.cellRows, (c + 1) * this.cellRows));
                }
                this.datas.push(temp_arr);
            }
        },
        cellClick(msg) {
            this.selectedId = msg.subId;
            this.$emit('sendMsg', msg);
        }
    }



    // <div>
    //     <port-state :portsData="aaa" @sendMsg="bbb" ></port-state >
    // </div>

    // import PortState from '@/components/Port-state';

    // export default {
    //     components: {
    //         PortState
    //     }
    // }

    // getPortState() {
    //     let _url = '/resman/map/switch/3';
    //     this.$http.get(_url)
    //         .then((response) => {
    //             if (response.code === 0) {
    //                 this.aaa = response.data.deviceSwitchSub;
    //             } else {
    //                 console.log(response.msg)
    //             }
    //         }).catch((response) => {
    //             console.log(response)
    //         })
    // }

    // bbb(msg){
    //     let temp_obj=msg;
    //     console.log(msg)
    // }






}
</script>